<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>权限管理</title>

    <link rel="stylesheet" href="resources/css/bootstrap.css">
    <link rel="stylesheet" href="resources/css/xenon-core.css">
    <link rel="stylesheet" href="resources/css/xenon-forms.css">
    <link rel="stylesheet" href="resources/css/xenon-components.css">
    <link rel="stylesheet" href="resources/css/xenon-skins.css">
    <link rel="stylesheet" href="resources/css/custom.css">
    <!--fonts-->
    <link rel="stylesheet" href="resources/fonts/arimo/css/arimo.css">
    <link rel="stylesheet" href="resources/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="resources/fonts/fontawesome/css/font-awesome.min.css">
    <script src="resources/js/jquery-1.11.1.min.js"></script>

    <link href="resources/css/admin.css" rel="stylesheet"/>
    <link href="resources/css/zui.css" rel="stylesheet"/>
    <link href="resources/css/zui.lite.css" rel="stylesheet"/>
    <link href="resources/css/zui-theme.css" rel="stylesheet"/>

    <script src="resources/js/zui.js"></script>
    <script src="resources/js/zui.lite.js"></script>
<body>
<div class="row">
    <div class="col-md-12">

        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#home" data-toggle="tab">
                    <span class="visible-xs"><i class="fa-home"></i></span>
                    <span class="hidden-xs">系统恢复信息列表</span>
                </a>
            </li>
            <li>
                <a href="#profile" data-toggle="tab">
                    <span class="visible-xs"><i class="fa-user"></i></span>
                    <span class="hidden-xs">系统备份信息列表</span>
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="home">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">系统恢复列表</h3>
                    </div>
                    <div class="panel-body">

                        <script type="text/javascript">
                            jQuery(document).ready(function($) {
                                $("#example-3").dataTable().yadcf([{
                                    column_number: 0
                                }, {
                                    column_number: 1,
                                    filter_type: 'text'
                                }, {
                                    column_number: 2,
                                    filter_type: 'text'
                                }, {
                                    column_number: 3,
                                    filter_type: 'text'
                                }, {
                                    column_number: 4
                                }, ]);
                            });
                        </script>

                        <table class="table table-striped table-bordered" id="example-3">
                            <thead>
                            <tr class="replace-inputs">
                                <th>编号</th>
                                <th>恢复名称</th>
                                <th>恢复内容</th>
                                <th>恢复时间</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Gecko</td>
                                <td>Firefox 1.0</td>
                                <td>Win 98+ / OSX.2+</td>
                                <td class="center">1.7</td>
                                <td>

                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Gecko</td>
                                <td>Firefox 1.5</td>
                                <td>Win 98+ / OSX.2+</td>
                                <td class="center">1.8</td>
                                <td>

                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Gecko</td>
                                <td>Firefox 2.0</td>
                                <td>Win 98+ / OSX.2+</td>
                                <td class="center">1.8</td>
                                <td>

                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Other browsers</td>
                                <td>All others</td>
                                <td>-</td>
                                <td class="center">-</td>
                                <td>

                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

            </div>
            <div class="tab-pane" id="profile">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">系统备份列表</h3>

                    </div>
                    <div class="panel-body">

                        <script type="text/javascript">
                            jQuery(document).ready(function($) {
                                $("#example-4").dataTable().yadcf([{

                                    column_number: 1,
                                    filter_type: 'text'
                                }, {
                                    column_number: 2
                                }, {
                                    column_number: 3,
                                    filter_type: 'text'
                                }, ]);
                            });
                        </script>

                        <table class="table table-striped table-bordered" id="example-4">

                            <tbody>
                            <tr>
                                <td>Trident</td>
                                <td>Internet Explorer 4.0</td>
                                <td>Win 95+</td>
                                <td class="center">4</td>
                                <td>
                                    <a href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" class="btn btn-secondary btn-sm btn-icon icon-left">
                                        恢复
                                    </a>
                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>Trident</td>
                                <td>Internet Explorer 5.0</td>
                                <td>Win 95+</td>
                                <td class="center">5</td>
                                <td>
                                    <a href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" class="btn btn-secondary btn-sm btn-icon icon-left">
                                        恢复
                                    </a>



                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>

                            <tr>
                                <td>Gecko</td>
                                <td>Mozilla 1.4</td>
                                <td>Win 95+ / OSX.1+</td>
                                <td class="center">1.4</td>
                                <td>
                                    <a href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" class="btn btn-secondary btn-sm btn-icon icon-left">
                                        恢复
                                    </a>


                                    <a href="javascript:;" onclick="jQuery('#modal-7').modal('show', {backdrop: 'fade'});" class="btn btn-info btn-sm btn-icon icon-left">
                                        详细信息
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>

                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<link rel="stylesheet" href="resources/js/multiselect/css/multi-select.css">
<link rel="stylesheet" href="resources/js/select2/select2.css">
<link rel="stylesheet" href="resources/js/select2/select2-bootstrap.css">
<!-- Bottom Scripts -->
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/TweenMax.min.js"></script>
<script src="resources/js/joinable.js"></script>
<script src="resources/js/resizeable.js"></script>
<script src="resources/js/xenon-api.js"></script>
<script src="resources/js/xenon-toggles.js"></script>
<script src="resources/js/datatables/js/jquery.dataTables.min.js"></script>
<!-- Imported scripts on this page -->
<script src="resources/js/xenon-widgets.js"></script>
<script src="resources/js/toastr/toastr.min.js"></script>
<script src="resources/js/datatables/dataTables.bootstrap.js"></script>
<script src="resources/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="resources/js/datatables/tabletools/dataTables.tableTools.min.js"></script>
<script src="resources/js/select2/select2.min.js"></script>
<script src="resources/js/jquery-ui.min.js"></script>

<!-- JavaScripts initializations and stuff -->
<script src="resources/js/xenon-custom.js"></script>

<script src="resources/plugins/jquery.1.12.4.min.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="../assets/js/xenon-custom.js"></script>
<!--Specific JS for this page-->
<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Notifications
        setTimeout(function() {
            var opts = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right toast-default",
                "toastClass": "black",
                "onclick": null,
                "showDuration": "100",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
        }, 2000);
    });
</script>
</body>
</html>